 <template>
    <div style="padding: 50px 100px;min-width:900px;">
      <froala :config="config" v-model="model"></froala>
      <div class="footerBtn">
        <button type="primary">取消</button>
        <button type="success" class="sbmtBtn" @click="bSubmit">提交</button>
      </div>
      <!-- 相当于实时预览功能 -->
      <!-- <froalaView v-model="model"></froalaView> -->
  </div>
</template><script>
export default {
  data() {
    return {
      editor: null,
      config: {
        zIndex: 2501,
        // wdth:800, //宽度可设置
        height: 600,
        heightMax: 800, // heightMax heightMin 都可以设置
        toolbarSticky: false,
        autofocus: true,
        // 上方的工具栏
        toolbarButtons: [
          "fullscreen",
          "bold",
          "italic",
          "underline",
          "strikeThrough",
          "subscript",
          "superscript",
          "|",
          "paragraphFormat",
          "fontFamily",
          "fontSize",
          "paragraphStyle",
          "color",
          "inlineClass",
          "inlineStyle",
          "lineHeight",
          "|",
          "align",
          "formatOL",
          "formatUL",
          "outdent",
          "indent",
          "quote",
          "-",
          "insertLink",
          "insertImage",
          // "insertVideo",
          "embedly",
          // "insertFile",
          "insertTable",
          "|",
          "emoticons",
          "fontAwesome",
          "specialCharacters",
          "insertHR",
          "selectAll",
          "clearFormatting",
          "|",
          "print",
          // "getPDF",
          "spellChecker",
          "help",
          "html",
          "|",
          "undo",
          "redo"
        ],
        placeholderText: "请输入内容......",
        language: "zh_cn",
        imageDefaultWidth: 500,
        //图片的上传地址 ，请不要删除，thanks
        // imageUploadURL: "xxxxxx",
        // imageManagerLoadURL: "xxxxxx",

        // 自动save
        // saveInterval:2500,
        // saveMethod:"PUT",
        // saveParams:{
        //   id:"b-rich-editor"
        // },
        // saveURL: "localhost:8080/richEditor/autoSave",

        fontFamily: {
          "Microsoft YaHei": "微软雅黑",
          SimSun: "宋体",
          NSimSun: "新宋体",
          SimHei: "黑体",
          "Microsoft JhengHei": "微软正黑体",
          KaiTi: "楷体",
          "Roboto,sans-serif": "Roboto",
          "Oswald,sans-serif": "Oswald",
          "Montserrat,sans-serif": "Montserrat",
          "'Open Sans Condensed',sans-serif": "Open Sans Condensed",
          "Arial,Helvetica,sans-serif": "Arial",
          "Georgia,serif": "Georgia",
          "Impact,Charcoal,sans-serif": "Impact",
          "Tahoma,Geneva,sans-serif": "Tahoma",
          "Times New Roman,Times,serif,-webkit-standard": "Times New Roman",
          "Verdana,Geneva,sans-serif": "Verdana"
        },
        quickInsertButtons: ["image", "table", "embedly", "ul", "ol", "hr"],

        // fontFamilyDefaultSelection:"微软雅黑",  // 如果fontFamily有Arial，则默认是Arial，就算此项设置也不好使；如果没有，则此项可以正常设置
        paragraphFormatSelection: true,
        fontFamilySelection: true,
        fontSizeSelection: true,
        tabSpaces: 4,
        //  documentReady: true,  //启用文档模式

        // 请求头
        requestHeaders: { Authorization: localStorage.eleToken },

        events: {
          "froalaEditor.initialized": (e, editor) => {
            this.editor = editor;
            console.log("initialized", editor);
          }
          // "froalaEditor.contentChanged": (e, editor) => {
          //   console.log("75contentChange-");
          //   this.$emit("on-change", editor.html.get(true));
          // },
          // "froalaEditor.keydown": (e, editor, keydownEvent) => {
          //   console.log(82, "froalaEditor.keydown");
          //   console.log("this.model--", this.model);
          // }
        }
      },
      model: ""
    };
  },
  methods: {
    bSubmit() {
      console.log("147--bSubmit--", this.model);
    }
  }
};
</script>
<style lang="less" scoped>
.footerBtn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 30px;
  .sbmtBtn {
    margin-left: 30px;
  }
}
</style>
